<!-- 提现记录 -->
<template>
  <div>
    <titleWrap :labelWidth="labelWidth" :queryFormConfig="queryFormConfig" :queryFormData="queryFormData">
      <!-- 提现金额 -->
      <div slot="price">
        <div class="flexDiv">
          <el-input size="mini" placeholder="最低"  @keyup.enter.native="handleQuery"></el-input>
          <span style="margin:0 10px;">至</span>
          <el-input size="mini" placeholder="最高"  @keyup.enter.native="handleQuery"></el-input>
        </div>
      </div>

      <!-- 按钮 -->
      <div slot="btn">
        <div>
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button size="mini">导出</el-button>
          <el-button type="text" size="mini" @click="reset">清空筛选</el-button>
        </div>
      </div>

      <myTable :tableConfig="tableConfig" :pagination="pagination" @paginationQuery="paginationQuery"></myTable>
    </titleWrap>
  </div>
</template>
  
<script>
export default {
  components: {},
  data() {
    return {
      labelWidth: "60px",
      queryFormConfig: [
        {
          label: "提现单号",
          prop: "certNo",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "商户ID",
          prop: "certNo",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "到账账号",
          prop: "certNo",
          type: "input",
          enter: this.handleQuery
        },
        {
          label: "提现状态",
          prop: "sampleName",
          type: "select",
          options: [],
          enter: this.handleQuery
        },
        { label: "提现金额", slotName: "price" },
        {
          label: "提现时间",
          prop: "time",
          type: "dateRange",
          change: this.handleQuery
        },
        { label: "", slotName: "btn" }
      ],
      queryFormData: {},
      tableConfig: {
        showIndex: false,
        loading: false,
        selection: false,
        data: [],
        columns: [
          { label: "提现单号", prop: "certNo" },
          { label: "商户ID", prop: "sampleName" },
          { label: "提现金额", prop: "factoryNumber" },
          { label: "手续费", prop: "specifications" },
          { label: "到账账号", prop: "certNo" },
          { label: "实到金额", prop: "sampleName" },
          { label: "提现状态", prop: "factoryNumber" },
          { label: "申请时间", prop: "specifications" }
        ]
      },
      pagination: {
        page: 1,
        limit: 20,
        total: 0
      }
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    // 查询
    handleQuery(num = 1) {
      // if (num != 0) {
      //   this.pagination = {
      //     page: 1,
      //     limit: 15,
      //     total: 0,
      //   }
      // }
      // this.tableConfig.loading = true;
      // //证书发放时间
      // if (this.queryFormData.time) {
      //   this.queryFormData.startTime = this.queryFormData.time[0];
      //   this.queryFormData.endTime = this.queryFormData.time[1];
      // } else {
      //   this.queryFormData.startTime = '';
      //   this.queryFormData.endTime = '';
      // }
      // queryGrantPage({
      //   size: this.pagination.limit,
      //   current: this.pagination.page,
      //   condition: this.queryFormData,
      // }).then((res) => {
      //   const { records, total } = res.data;
      //   this.tableConfig.loading = false;
      //   this.tableConfig.data = records;
      //   this.pagination.total = total;
      // }).catch((res) => {
      //   this.tableConfig.loading = false;
      // })
    },
    paginationQuery(val) {
      this.pagination.page = val.page;
      this.handleQuery(0);
    },
    // 重置
    reset() {
      this.queryFormData = {};
      this.handleQuery();
    }
  }
};
</script>
  
<style scoped lang="scss">
::v-deep .el-form-item:nth-child(6) {
  width: 28% !important;
}
</style>
  